
<ion-header>
  <ion-navbar>
    <ion-title>Icon Buttons</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <p>
    <button ion-button color="light" icon-start>
      <ion-icon name='arrow-back'></ion-icon>
      Back
    </button>

    <button ion-button color="light" icon-only>
      <ion-icon name='arrow-down'></ion-icon>
    </button>

    <button ion-button color="light" icon-only>
      <ion-icon name='arrow-up'></ion-icon>
    </button>

    <button ion-button color="light" icon-end>
      Next
      <ion-icon name='arrow-forward'></ion-icon>
    </button>
  </p>

  <p>
    <button ion-button icon-start>
      <ion-icon name='home'></ion-icon>
      Home
    </button>
    <button ion-button outline icon-start>
      <ion-icon name='briefcase' is-active="false"></ion-icon>
      Work
    </button>
    <button ion-button clear icon-start>
      <ion-icon name='beer' is-active="false"></ion-icon>
      Pub
    </button>
  </p>

  <p>
    <button ion-button color="secondary" icon-start>
      <ion-icon name='people'></ion-icon>
      Friends
    </button>
    <button ion-button color="secondary" outline icon-start>
      <ion-icon name='paw' is-active="false"></ion-icon>
      Best Friend
    </button>
  </p>

  <p>
    <button ion-button color="danger" icon-start>
      <ion-icon name='close'></ion-icon>
      Remove
    </button>
    <button ion-button color="danger" outline icon-only>
      <ion-icon name='remove-circle' is-active="false"></ion-icon>
    </button>
    <button ion-button color="danger" clear icon-only>
      <ion-icon name='trash' is-active="false"></ion-icon>
    </button>
  </p>

  <p>
    <button ion-button color="dark" round icon-start>
      <ion-icon name='construct' is-active="false"></ion-icon>
      Tools
    </button>
    <button ion-button color="dark" clear icon-only>
      <ion-icon name='hammer' is-active="false"></ion-icon>
    </button>
  </p>

</ion-content>
